<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>待办事项列表</title>
    <link href="https://cdn.bootcss.com/bulma/0.7.5/css/bulma.min.css" rel="stylesheet">
</head>

<body>
    <div id="root">
        <section class="hero is-primary">
            <div class="hero-body">
                <div class="container">
                    <h1 class="title">
                        {{title}}
                    </h1>
                    <h2 class="subtitle">
                        {{subtitle}}
                    </h2>
                </div>
            </div>
        </section>

        <section class="hero">
            <div class="hero-body">
                <div class="container">
                    <div class="field has-addons">
                        <div class="control">
                            <input class="input" type="text" placeholder="请输入新待办事项" v-model="inputValue" @keydown="addTodoItemInputHandler" ref="inputDOM">
                        </div>
                        <div class="control">
                            <a class="button is-info" @click="addTodoItem">
                添加
              </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="hero">
            <div class="hero-body">
                <div class="container">
                    <div class="columns is-multiline is-mobile">
                        <div class="column is-one-quarter" v-for="todo of todos" :key="todo.id">
                            <div class="card">
                                <div class="card-content">
                                    <div class="content">
                                        {{todo.title}}
                                    </div>
                                </div>
                                <footer class="card-footer">
                                    <span class="card-footer-item" :class="todo.isCompleted ? 'has-text-primary' : 'has-text-danger'">{{todo.isCompleted ? '已' : '未'}}完成</span>
                                    <span class="card-footer-item" @click="completedChangeHandler(todo)">标记{{!todo.isCompleted ? '已' : '未'}}完成</span>
                                    <span class="card-footer-item" @click="deleteTodoItem(todo.id)">删除</span>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="./libs/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                title: '待办事项列表',
                subtitle: 'todolist...',
                todos: [{
                    id: 1,
                    title: '吃饭',
                    isCompleted: false
                }, {
                    id: 2,
                    title: '睡觉',
                    isCompleted: true
                }, {
                    id: 3,
                    title: '打豆豆',
                    isCompleted: false
                }],
                index: 4,
                inputValue: ''
            },
            methods: {
                completedChangeHandler(todo) {
                    todo.isCompleted = !todo.isCompleted
                },
                deleteTodoItem(id) {
                    this.todos = this.todos.filter(todo => todo.id !== id)
                },
                addTodoItem() {
                    if (!this.inputValue)
                        return
                    this.todos.push({
                        id: this.index++,
                        title: this.inputValue,
                        isCompleted: false
                    })
                    this.inputValue = ''

                    // console.log(this.$refs)
                    // 获取输入框，使其获得焦点
                    this.$refs.inputDOM.focus()
                },
                addTodoItemInputHandler(e) {
                    if (e.keyCode === 13)
                        this.addTodoItem()
                }
            }
        })
    </script>
</body>

</html>